<template>
    <view class="content">
        <image src="../../static/image/index.png" class="index-img"></image>
        <view class="wrapper">
			<!-- 零担发货 -->
			<image :src="data.zero_img" class="img" @click="toPage(`/pages/ld-send/ld-send`)"></image>
			<!-- 包车发货 -->
			<image :src="data.car_img" class="img" @click="toPage(`/pages/bus/bus`)"></image>
			
            <!-- <view class="item" @click="toPage(`/pages/ld-send/ld-send`)">
                <view class="title">直达零担发货</view>
                <view class="btn">立即进入</view>
                <view class="down"></view>
                <image :src="data.zero_img" class="img-01"></image>
            </view>
            <view class="item" @click="toPage(`/pages/bus/bus`)">
                <view class="title">直达包车发货</view>
                <view class="btn">立即进入</view>
                <view class="down"></view>
                <image :src="data.car_img" class="img-02"></image>
            </view> -->
        </view>    
        
        <!-- 底部导航 -->
        <u-tabbar v-model="current" :list="tab_list" active-color="#00457f" inactive-color="#5d5f6a" :border-top="true" @change="tabbarChange"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                statusBar: 0,
                background: { backgroundColor: 'rgba(255,255,255,0)' },
                current: 0, //底部导航索引
                tab_list: [],
                identity: '',//1用户 2司机 3领导 4发货端 5卸货端
				data: {},
            };
        },
        onLoad() {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
            	success: function(res) {
            		_this.statusBar = res.statusBarHeight;
            	}
            });
            
            // 接收身份监听
            uni.$on('identityChange', data => {
				this.$removeSync('identity')
				this.$setSync('identity', data.msg)
                this.identity = data.msg;
                this.tabbarInfo();
            })
        },
        onShow() {
			this.getData()
        },
        methods: {
            toPage(url) {
				if (!uni.getStorageSync('userToken')) {
				    this.$confirm('请先登录并且绑定手机号，是否去登录？',()=>{
				        uni.navigateTo({
				            url: "/pagesA/login/login"
				        })
				    })
				} 
				// else if (!uni.getStorageSync('MOBILE')) {
				//     this.$confirm('您还没有绑定手机号，是否去绑定？',()=>{
				//         uni.navigateTo({
				//             url: "/pagesA/login/login?show=1"
				//         })
				//     })
				// } 
				else {
					this.$gTo(url)
				}
            },
            
			// 获取首页数据
			getData() {
			    this.$ajax('index', {
			        user_token: this.$getSync('userToken'),
			    }).then(ret => {
			        if (ret.success == 1000) {
			            this.data = ret.detail
						this.$setSync('identity', this.data.user_type)
						this.identity = this.data.user_type
						this.tabbarInfo();
			        } else {
			            this.$toast(ret.msg);
			        }
			    });
			},
			
            //切换底部导航
            tabbarChange(e) {
            	this.current = e;
            },
            
            tabbarInfo(){
                // 用户
                if (this.$getSync('identity') == 1) {
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '发货',
                            pagePath: "/pages/tabbar/index"
                        },{
                            iconPath: "/static/icon/tab_03.png",
                            selectedIconPath: "/static/icon/tab_04.png",
                            text: '订单',
                            pagePath: "/pages/tabbar/order"
                        },{
                            iconPath: "/static/icon/tab_05.png",
                            selectedIconPath: "/static/icon/tab_06.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/mine"
                        }
                    ];
                }
                // 司机
                if(this.$getSync('identity') == 2){
                    this.tab_list = [
                        {
                            iconPath: "/static/icon/tab_01.png",
                            selectedIconPath: "/static/icon/tab_02.png",
                            text: '首页',
                            pagePath: "/pages/tabbar/driver"
                        },{
                            iconPath: "/static/icon/tab_05.png",
                            selectedIconPath: "/static/icon/tab_06.png",
                            text: '我的',
                            pagePath: "/pages/tabbar/driver-mine"
                        }
                    ];
                }
            },
            
            onPageScroll: function(e) {
            	//nvue暂不支持滚动监听，可用bindingx代替
            	// console.log("滚动距离为：" + e.scrollTop);
            	let a = e.scrollTop * 0.05;
            	if (a > 1) {
            		a = 1;
            	}
            	if (e.scrollTop == 0) {
            		this.background.backgroundColor = 'rgba(255,255,255,0)';
            	} else {
            		this.background.backgroundColor = 'rgba(255,255,255,' + a + ')';
            	}
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #00457f;
    }
    .index-img{
        width: 750rpx;
        height: 500rpx;
    }
    .wrapper{
        padding: 30rpx;
    }
	.img{
		width: 690rpx;
		height: 232rpx;
		margin-bottom: 35rpx;
	}
    .item{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 35rpx;
        overflow: hidden;
        position: relative;
    }
    .title{
        font-size: 42rpx;
        font-weight: bold;
        padding-left: 45rpx;
        padding-top: 35rpx;
        padding-bottom: 15rpx;
    }
    .btn{
        width: 153rpx;
        height: 60rpx;
        background-color: #7fb1e3;
        border-radius: 50rpx;
        font-size: 26rpx;
        color: #fff;
        text-align: center;
        line-height: 60rpx;
        margin-left: 45rpx;
        margin-bottom: 25rpx;
    }
    .down{
        width: 100%;
        height: 44rpx;
        background: linear-gradient(to right, #fdfeff, #c2dff7);
    }
    .img-01{
        width: 345rpx;
        height: 173rpx;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .img-02{
        width: 245rpx;
        height: 139rpx;
        position: absolute;
        bottom: 20rpx;
        right: 25rpx;
    }

</style>
